import Taro, {Component, Config} from '@tarojs/taro';
import {View} from '@tarojs/components';
import {AtButton} from 'taro-ui';
import './index.scss';
import {HxPost} from '../../service/http';
import HxPage from '../../components/hxPage/hxPage';
import HxInfiniteScroll from '../../components/hxInfiniteScroll/hxInfiniteScroll';

export default class ChargeListPage extends Component {

    private hasMore = false;
    config: Config = {
        // navigationBarTitleText: '充值记录'
        navigationBarTitleText: ''
    };

    constructor() {
        super(...arguments);
        this.state = {
            tradeDetailList: []
        };
    }

    private pageNo = 1;
    private pageSize = 10;

    getRechargeRecord() {
        this.hasMore = false;
        let param = {
            pageNo: this.pageNo + '',
            pageSize: this.pageSize + ''
        };
        Taro.showLoading({title: '加载中...', mask: true})
            .then(() => {
                return HxPost('rechargeRecord', param);
            })
            .then((suc: any) => {
                Taro.hideLoading();
                if (suc['tradeDetailList']) {
                    this.pageNo += 1;
                    this.hasMore = true;
                    this.setState({
                        tradeDetailList: this.state['tradeDetailList'].concat(suc['tradeDetailList'])
                    });
                } else {
                    Taro.showToast({title: '未查询到更多充值记录', icon: 'none', duration: 2 * 1000}).catch();
                }
            })
            .catch((err) => {
                Taro.hideLoading();
                Taro.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
            });

    }

    componentDidMount() {
        this.Lower();
    }

    Upper() {//加载更多
        this.getRechargeRecord();
    }

    Lower() {//下拉刷新
        this.pageNo = 1;
        this.setState({
            tradeDetailList: []
        });
        this.getRechargeRecord();
    }

    Refund(e) {
        Taro.showModal({
            title: '退款',
            content: '确定退款吗？',
            cancelText: '取消',
            confirmText: '确定'
        })
            .then((res: any) => {
                if (res.cancel) {
                    return Promise.reject('cancel');
                }
                return Taro.showLoading({title: '加载中...', mask: true});
            })
            .then(() => {
                let param = {
                    orderId: e.orderId
                };
                return HxPost('refund', param);
            })
            .then(() => {
                Taro.hideLoading();
                this.Lower();
                Taro.showToast({title: '退款成功', icon: 'success', duration: 2 * 1000}).catch();
            })
            .catch((err) => {
                Taro.hideLoading();
                if (err !== 'cancel') {
                    Taro.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
                }
            });
    }

    render() {
        // @ts-ignore
        const {tradeDetailList} = this.state;
        return (
            <HxPage>
                <View className='charge_list_wrap'>
                    <HxInfiniteScroll
                        hasMore={this.hasMore}
                        Upper={this.Upper.bind(this)}
                        Lower={this.Lower.bind(this)}>
                        <View className='charge_list'>
                            {
                                tradeDetailList.map((item, index) => (
                                    <View key={index} className='charge_list_item'>
                                        <View className='charge_list_item_left'>{item.tradetime}</View>
                                        <View
                                            className='charge_list_item_right'>{parseFloat(item.amount) > 0 ? '+' : ''}{item.amount}元</View>
                                        <View
                                            hidden={item.refundFlag !== 'Y' || parseFloat(item.amount) < 0}
                                            className='charge_list_item_right2'>
                                            <AtButton
                                                className='hxButton xs_button'
                                                onClick={this.Refund.bind(this, {orderId: item.orderId, index: index})}
                                            >退款</AtButton>
                                        </View>
                                    </View>
                                ))
                            }
                        </View>
                    </HxInfiniteScroll>
                </View>
            </HxPage>
        );
    }
}
